<template>
    <view class="u-page" style="background-color: #ffffff;height: 100vh;overflow: hidden;">
      <view style="padding: 1vw">
        <view class="search-bar">
          <up-form>
<!--          <up-form-item-->
<!--              label="实验项目名称："-->
<!--              labelWidth="auto">-->
<!--            <up-input v-model="search.experimentName" placeholder="请输入项目名称"/>-->
<!--          </up-form-item>-->
<!--            <up-form-item-->
<!--                label="项目状态："-->
<!--                labelWidth="auto" >-->
<!--              <up-input border="none" @click="openSelectType" readonly  v-model="search.experimentStatus1" placeholder="请选择状态"/>-->
<!--              <template #right>-->
<!--                <up-icon-->
<!--                    name="arrow-right"-->
<!--                ></up-icon>-->
<!--              </template>-->
<!--            </up-form-item>-->
<!--          <up-button type="primary" style="width: 70%" @click="toSearch">查询</up-button>-->
<!--          <up-button type="primary" style="margin-top: 2vh;width: 70%" @click="toReset">重置</up-button>-->
            <div class="button-container">
              <up-button type="primary" style="width: 20%" @click="clickButtons('')">全部</up-button>
              <up-button type="primary" style="width: 20%" @click="clickButtons('0')">未开始</up-button>
              <up-button type="primary" style="width: 20%" @click="clickButtons('1')">进行中</up-button>
              <up-button type="primary" style="width: 20%" @click="clickButtons('2')">已完成</up-button>
            </div>
            <up-button type="primary" style="width: 60%;margin-top: 10px" @click="createExperiment()">创建实验</up-button>
          </up-form>
        </view>
      </view>
      <up-divider></up-divider>
      <view class="list-container" style="height: 90vh;overflow-y: scroll">
        <scroll-view
            refresher-enabled
            @refresherrefresh="pullDownList"
            :refresher-triggered="triggered"
        >
          <up-list>
            <up-list-item
                v-for="(item, index) in listData"
                :key="index">
              <up-swipe-action>
                <up-swipe-action-item
                    :autoClose="false"
                    :options="getRightActions(item, index)"
                    @click="handleButtonClick1($event,item)"
                >
                <up-cell>
                  <template #title>
                    <span style="font-weight: bold">实验名称：<span style="font-weight: lighter">{{item.experimentName}}</span></span>
                    <span style="font-weight: bold">创建人：<span style="font-weight: lighter">{{item.creatorName}}</span></span>
                    <span style="font-weight: bold">创建时间：<span style="font-weight: lighter">{{item.createTime}}</span></span>
                    <span style="font-weight: bold">完成时间：<span style="font-weight: lighter">{{item.endTime}}</span></span>
                    <span style="font-weight: bold">状态：<span style="font-weight: lighter">{{ststusFormatter(item)}}</span></span>
                    <span style="font-weight: bold">耗时：<span style="font-weight: lighter">{{item.timeDifference}}</span></span>
                  </template>
                </up-cell>
                </up-swipe-action-item>
              </up-swipe-action>
            </up-list-item>
<!--            <up-loadmore :status="loadmoreStatus" @loadmore="scrolltolowerGetList" loadmoreText="点击加载更多"/>-->
          </up-list>
        </scroll-view>
      </view>
      <up-action-sheet :actions="list1" :show="show1" @select="selectClick1" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" cancelText="取消" @close="show1 = false"></up-action-sheet>
      <up-action-sheet description="请选择项目状态" :actions="list" :show="show" @select="selectClick" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" cancelText="取消" @close="show = false"></up-action-sheet>
    </view>
</template>

<script setup>
import { ref,onMounted, onUnmounted   } from 'vue';
import { onShow, onNavigationBarButtonTap } from '@dcloudio/uni-app';
import { getAllMyLabor,startLabor } from '@/api/system/sysIndex.js'
import {deleteAPI} from "../../api/system/sysIndex";
const listData = ref([]) // 存储分页数据
const search = ref({
  pageNum:1,
  pageSize:100,
  experimentName: undefined, //项目名称
  experimentStatus: undefined,  //项目状态
  experimentStatus1: undefined,  //项目状态
})

function ststusFormatter(row){
  if (row.experimentStatus == 0){
    return '未开始'
  }else if (row.experimentStatus == 1){
    return '进行中'
  }else if (row.experimentStatus == 2){
    return '已完成'
  }else if (row.experimentStatus == 3){
    return '已终止'
  }
}

//点击创建实验
const list1 = ref([
  {
    name: '模板创建',
  },
  {
    name: '空白计划',
  }
]);
const show1 = ref(false);
const selectClick1 = (index) => {
  if (index.name == '模板创建'){
    uni.navigateTo({
      url: `/pages/laboratory/moreTemp`
    });
  }else if (index.name == '空白计划'){
    uni.navigateTo({
      url: `/pages/laboratory/createExperiment`
    });
  }
  show1.value = false
};
//创建实验
function createExperiment(){
  show1.value = true
}


//点击选择模板类型
const list = ref([
  {
    name: '未开始',
  }, {
    name: '已开始',
  },{
    name: '已完成',
  },{
    name: '已终止',
  },
]);
const show = ref(false);
const selectClick = (index) => {
  if (index.name == '未开始'){
    search.value.experimentStatus = '0'
    search.value.experimentStatus1 = '未开始'
  }else if (index.name == '已开始'){
    search.value.experimentStatus = '1'
    search.value.experimentStatus1 = '已开始'
  }else if (index.name == '已完成'){
    search.value.experimentStatus = '2'
    search.value.experimentStatus1 = '已完成'
  }else if (index.name == '已终止'){
    search.value.experimentStatus = '3'
    search.value.experimentStatus1 = '已终止'
  }
  show.value = false
};

function clickButtons(type){
  search.value.experimentStatus = type
  toSearch()
}

function openSelectType(){
  show.value = true
}

//滑动点的按钮
function getRightActions(item, index){
  return [
    {
      name:'查看',
      text: '查看',
      style:{
        backgroundColor:'#3c9cff',
        display:item.experimentStatus == 2 || item.experimentStatus == 3?'':'none'
      }
    },
    {
      name:'编辑',
      text: '编辑',
      style:{
        backgroundColor:'#f29100',
        display:item.experimentStatus == 0?'':'none'
      }
    }
    ,{
      text: '开始实验',
      style:{
        backgroundColor:'#3c9cff',
        display:item.experimentStatus == 0?'':'none'
      }
    },
    {
      text: '删除',
      style:{
        backgroundColor:'#dd6161',
        display:item.experimentStatus == 0?'':'none'
      }
    },{
      text: '补充',
      style:{
        backgroundColor:'#18b566',
        display:item.experimentStatus == 2?'':'none'
      }
    },{
      text: '进入实验',
      style:{
        backgroundColor:'#82848a',
        display:item.experimentStatus == 1?'':'none'
      }
    },
  ]
}

// const options1 = ref([
//   {
//     text: '查看',
//     style:{
//       backgroundColor:'#3c9cff',
//       display:'none'
//     }
//   }, {
//     text: '编辑',
//     style:{
//       backgroundColor:'#3c9cff'
//     }
//   },{
//     text: '开始实验',
//     style:{
//       backgroundColor:'#3c9cff'
//     }
//   },{
//     text: '删除',
//     style:{
//       backgroundColor:'#3c9cff'
//     }
//   },{
//     text: '补充',
//     style:{
//       backgroundColor:'#3c9cff'
//     }
//   },{
//     text: '进入实验',
//     style:{
//       backgroundColor:'#3c9cff',
//
//     }
//   },
// ]);
const loadmoreStatus = ref('loadmore')
//查询
function toSearch(){
  pullDownList()
}
//重置
function toReset(){
  search.value = {
    pageNum:1,
    pageSize:100,
    templateName:'',  //模板名称
    temType:''  //模板类型
  }
  pullDownList()
}

//下拉刷新
const triggered=ref(false)
function pullDownList(){
  triggered.value = true
  getTempList()
}

//选择模板
function handleButtonClick1(item,item1) {
  if (item.index == 0){ //查看
    uni.navigateTo({
      url: `/pages/laboratory/experimentDetail?laborId=${item1.id}`
    });
  }else if (item.index == 1){  //编辑
    uni.navigateTo({
      url: `/pages/laboratory/editExperiment?tempId=${item1.id}`
    });
  }else if (item.index == 2){  //开始实验
    uni.showModal({
      title: '提示',
      content: '确定开始实验吗？',
      cancelText: '取消',
      confirmText: '确定',
      success: function (res) {
        if (res.confirm) {
          startLabor(item1.id)
              .then((response) => {
                uni.showToast({
                  title: ' 实验已开始！',
                  mask: false,
                  icon: "success",
                });
                getTempList()
              }).catch((err) => {
                uni.showToast({
                  title: err.message,
                  mask: false,
                  icon: "none",
                });
          })
        }
      }
    })
  }else if (item.index == 3){  //删除
    uni.showModal({
      title: '提示',
      content: '是否确认删除实验计划？',
      cancelText: '取消',
      confirmText: '确定',
      success: function (res) {
        if (res.confirm) {
          deleteAPI(item1.id)
              .then((response) => {
                uni.showToast({
                  title: ' 删除成功！',
                  mask: false,
                  icon: "success",
                });
                getTempList()
              }).catch((err) => {
            uni.showToast({
              title: err.message,
              mask: false,
              icon: "none",
            });
          })
        }
      }
    })
  }else if (item.index == 4){  //补充
    uni.navigateTo({
      url: `/pages/laboratory/bcwrite?laborId=${item1.id}`
    });
  }else if (item.index == 5){  //进入实验
    uni.navigateTo({
      url: `/pages/laboratory/enterExperiment?laborId=${item1.id}`
    });
  }
}
// //查询通知列表
function getTempList(){
  search.value.pageNum = 1
  loadmoreStatus.value = 'loadmore'
  // 模拟请求后端接口获取分页数据
  getAllMyLabor(search.value).then((response) => {
    listData.value = response.rows || [];
    setTimeout(()=>{
      triggered.value = false
    },1000)
  });
}
getTempList()
</script>

<style lang="scss" scoped>
.button-container {
  display: flex;
  justify-content: space-between; /* 平均分配按钮之间的空间 */
  width: 100%; /* 容器宽度为100%，确保它占据可用的空间 */
}
.button-container up-button {
  flex: 1; /* 每个按钮根据容器的宽度自动调整其宽度 */
}
.button-container up-button:not(:last-child) {
  margin-right: 5px; /* 如果需要，可以设置按钮间的间距 */
}
</style>
